﻿@model AuctionControllerModel.Index
<div class="ui-box ui-box-alpha">
    @using (Html.BeginForm())
    {
        <div class="ui-box-head">
            <div class="ui-box-head-border">
                <div class="ui-box-head-title">
                    结算中心</div>
                <span class="ui-box-head-text">竞 拍</span> <a href="#" class="ui-box-head-more">去竞拍</a>
            </div>
        </div>
        <div class="ui-box-container-noborder">
            <div class="ui-box-content">
                dd</div>
        </div>
        if (!Model.AuctionOrder.IsVirtual)
        {
            <div class="ui-box-container-noborder">
                <div class="ui-box-container-head">
                    收货信息</div>
                <div class="ui-box-content">
                    <div>
                        <dl style="background-color: #F9F9F9; padding: 5px; border: 1px solid #F2F2F2;">
                            <dt>常用地址</dt>
                            @foreach (var address in Model.UserAddresses)
                            {
                                <dd>
                                    <p onclick="selectAddress(this);" data-receiver="@(address.Receiver)" data-mobile="@(address.Mobile)" data-phone="@(address.Phone)" data-areacode="@(address.AreaCode)" data-address="@(address.Address)" data-postalcode="@(address.PostalCode)">
                                        <label class="radio">
                                            <input type="radio" name="addressgroup" @(address.IsDefault ? "checked=checked" : string.Empty) value="@address.Id" onclick="  selectAddress(@address.Id);"/>
                                            <strong title="@address.Receiver">@(address.Receiver)</strong> <span>(@(address.Mobile)
                                                                                                               @address.Phone) </span><span>@Model.GetLocationName(address.AreaCode) </span>
                                            <span>@address.Address
                                                (@address.PostalCode)</span>
                                        </label>
                                    </p>
                                </dd>
                            }
                        </dl>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                            <div>
                                <label>
                                    收货人：</label><input type="text" id="receiver" name="receiver" value="@(Model.UserAddress.Receiver)" class="input-medium" />
                            </div>
                        </div>
                        <div class="span4">
                            <div>
                                <label>
                                    手机号码：</label>
                                <input type="text" id="mobile" name="mobile" value="@(Model.UserAddress.Mobile)" class="input-medium" maxlength="11" />
                            </div>
                        </div>
                        <div class="span4">
                            <div>
                                <label>
                                    固定电话：</label><input id="phone" name="phone" type="text" value="@(Model.UserAddress.Phone)" class="input-medium"
                                                        maxlength="20" /></div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                            <div>
                                <label>
                                    所在地区：</label><input id="areacode" type="text" name="areacode" value="@(Model.UserAddress.AreaCode)" /></div>
                        </div>
                        <div class="span4">
                            <div>
                                <label>
                                    街道地址：</label><input id="address" type="text" name="address" value="@(Model.UserAddress.Address)" />
                            </div>
                        </div>
                        <div class="span4">
                            <div>
                                <label>
                                    邮政编码：</label><input id="postalcode" type="text" name="postalcode" value="@(Model.UserAddress.PostalCode)" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
        <div class="ui-box-container-noborder">
            <div class="ui-box-container-head">
                支付及配送方式</div>
            <div class="ui-box-content">
            </div>
        </div>
        if (!Model.AuctionOrder.IsVirtual)
        {
            <div class="ui-box-container-noborder">
                <div class="ui-box-container-head">
                    发票信息</div>
                <div class="ui-box-content">
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="row-fluid">
                                <p>
                                    发票类型：
                                </p>
                                <p>
                                    发票抬头：
                                </p>
                                <p>
                                    发票内容：
                                </p>
                            </div>
                        </div>
                        <div class="span6">
                            <ul class="unstyled">
                                <li>常用发票信息</li></ul>
                        </div>
                    </div>
                </div>
            </div>
        }
        <div class="ui-box-container-noborder">
            <div class="ui-box-container-head">
                拍品清单</div>
            <div class="ui-box-content">
                <div class="ui-table-container">
                    <table class="ui-table ui-table-alpha">
                        <thead>
                            <tr>
                                <th class="span3">
                                    拍 品
                                </th>
                                <th class="span1">
                                    单价(元)
                                </th>
                                <th class="span2">
                                    数 量
                                </th>
                                <th class="span1">
                                    优惠(元)
                                </th>
                                <th class="span2">
                                    赠送积分
                                </th>
                                <th class="span2">
                                    小计(元)
                                </th>
                                <th class="span1">
                                    操 作
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="media">
                                        <a class="pull-left" href="" target="_blank">
                                            <img data-src="holder.js/64x64" class="media-object" alt="64x64" style="width: 64px;
                                                height: 64px;" src="">
                                        </a>
                                        <div class="media-body">
                                            <h5 class="media-heading">
                                                Media heading</h5>
                                            sssssss
                                        </div>
                                    </div>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="ui-box-container-noborder">
            <div class="ui-box-container-head">
                结算信息</div>
            <div class="ui-box-content">
                <div class="row-fluid">
                    <div class="span9">
                        <p>
                            商品金额：159.00元 + 运费：0.00元 - 优惠券： 0.00元 - 礼品卡：0.00元 - 返现：0.00元
                        </p>
                        <div class="row-fluid">
                            <div>
                                使用优惠券抵消部分总额</div>
                            <div>
                                (提示：东券每次只能使用一张，京券每次可使用多张，两种不可混合使用)
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <p>
                            应付总额：</p>
                        <div>
                            <button type="submit" class="ui-btn-order-submit">
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>
@section js{
    @Url.Sk().StaticJs("jquery.validate.min")
    @Url.Sk().StaticJs("jquery.validate.extend")
    @Url.Sk().StaticJs("application.global")
    <script type="text/javascript">
        $(function () {
            $('form').validate({
                rules: { receiver: { required: true }, address: { required: true }, postalcode: { required: true, postcode: true} },
                messages: { receiver: { required: '请填写真实有效的姓名！' }, address: { required: '请填写真实有效的街道地址信息！' }, postalcode: { required: '请填写邮政编码！', postcode: '请填写正确的邮政编码！'} },
                submitHandler: function (f) {
                    var isMobile = (document.getElementById('mobile').value.isMobile());
                    var isPhone = (document.getElementById('phone').value.isPhone());
                    if (isMobile || isPhone) {
                        f.submit();
                        return true;
                    } else {
                        var error = $("<span class='error'>移动电话、固定电话必填一项！</span>");
                        error.insertAfter("#phone");
                        return false;
                    }
                }
            });
        });
        function selectAddress(el) {
            var array = ['receiver', 'mobile', 'phone', 'areacode', 'address', 'postalcode'];
            $.each(array, function (i, n) {
                $("#" + n).val($(el).attr('data-' + n));
            });
        }
    </script>
}
